#checklist {
    --normal: #414856;
    --success: green;
    --error: red;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    width: 100%;
    height: max-content;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
    padding: 10px 15px;
    display: grid;
    grid-template-columns: 30px auto;
    align-items: center;
    gap: 3px;
}

@keyframes move {
    50% {
        padding-left: 8px;
        padding-right: 0;
    }
    100% {
        padding-right: 4px;
    }
}
@keyframes slice {
    60% {
        width: 100%;
        left: 4px;
        opacity: 1;
    }
    80% {
        width: 100%;
        left: -2px;
        padding-left: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes check-icon-before {
    0% {
        width: 4px;
        top: auto;
        transform: rotate(0);
    }
    50% {
        width: 0;
        top: auto;
        transform: rotate(0);
    }
    51% {
        width: 0;
        top: 8px;
        transform: rotate(45deg);
    }
    100% {
        width: 5px;
        top: 8px;
        transform: rotate(45deg);
    }
}
@keyframes check-icon-after {
    0% {
        width: 4px;
        top: auto;
        transform: rotate(0);
    }
    50% {
        width: 0;
        top: auto;
        transform: rotate(0);
    }
    51% {
        width: 0;
        top: 8px;
        transform: rotate(-45deg);
    }
    100% {
        width: 10px;
        top: 8px;
        transform: rotate(-45deg);
    }
}
@keyframes error-icon-before {
    0% {
        width: 4px;
        top: auto;
        transform: rotate(0);
    }
    50% {
        width: 0;
        top: auto;
        transform: rotate(0);
    }
    51% {
        width: 0;
        top: 8px;
        transform: rotate(45deg);
    }
    100% {
        width: 10px;
        top: 10px;
        left: 12.5%;
        transform: rotate(45deg);
    }
}
@keyframes error-icon-after {
    0% {
        width: 4px;
        top: auto;
        transform: rotate(0);
    }
    50% {
        width: 0;
        top: auto;
        transform: rotate(0);
    }
    51% {
        width: 0;
        top: 8px;
        transform: rotate(-45deg);
    }
    100% {
        width: 10px;
        top: 10px;
        right: 12.5%;
        transform: rotate(-45deg);
    }
}
@keyframes success-firework {
    0% {
        opacity: 1;
        box-shadow: 0 0 0 -2px var(--success), 0 0 0 -2px var(--success), 0 0 0 -2px var(--success), 0 0 0 -2px var(--success), 0 0 0 -2px var(--success), 0 0 0 -2px var(--success);
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        box-shadow: 0 -15px 0 0 var(--success), 14px -8px 0 0 var(--success), 14px 8px 0 0 var(--success), 0 15px 0 0 var(--success), -14px 8px 0 0 var(--success), -14px -8px 0 0 var(--success);
    }
}
@keyframes error-firework {
    0% {
        opacity: 1;
        box-shadow: 0 0 0 -2px var(--error), 0 0 0 -2px var(--error), 0 0 0 -2px var(--error), 0 0 0 -2px var(--error), 0 0 0 -2px var(--error), 0 0 0 -2px var(--error);
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        box-shadow: 0 -15px 0 0 var(--error), 14px -8px 0 0 var(--error), 14px 8px 0 0 var(--error), 0 15px 0 0 var(--error), -14px 8px 0 0 var(--error), -14px -8px 0 0 var(--error);
    }
}
#checklist label {
    color: var(--normal);
    position: relative;
    cursor: pointer;
    display: grid;
    align-items: center;
    width: fit-content;
    transition: color .3s ease;
    user-select: none;
    letter-spacing: -1px;
}

#checklist label::before, #checklist label::after {
    content: "";
    position: absolute;
}

#checklist label::before {
    height: 2px;
    width: 8px;
    left: -27px;
    background: var(--normal);
    border-radius: 2px;
    transition: background .3s ease;
}
#checklist label:checked:before {
    background: var(--normal);
}

#checklist label:after {
    height: 4px;
    width: 4px;
    top: 7px;
    left: -27px;
    border-radius: 50%;
}

#checklist input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    height: 15px;
    width: 15px;
    outline: none;
    border: 0;
    margin: 0 15px 0 0;
    cursor: pointer;
    display: grid;
    align-items: center;
}

#checklist input[type="checkbox"]::before, #checklist input[type="checkbox"]::after {
    content: "";
    position: absolute;
    height: 2px;
    top: auto;
    background: var(--normal);
    border-radius: 2px;
}

#checklist input[type="checkbox"]::before {
    width: 0;
    right: 60%;
    transform-origin: right bottom;
}

#checklist input[type="checkbox"]::after {
    width: 0;
    left: 40%;
    transform-origin: left bottom;
}

/* success == checked */
#checklist input[type="checkbox"]:checked::before {animation: check-icon-before .4s ease forwards;}
#checklist input[type="checkbox"]:checked::after {animation: check-icon-after .4s ease forwards;}
#checklist input[type="checkbox"]:checked + label {color: var(--success);animation: move .3s ease .1s forwards;}
#checklist input[type="checkbox"]:checked + label::before {background: var(--success);animation: slice .4s ease forwards;}
#checklist input[type="checkbox"]:checked + label::after {animation: success-firework .5s ease forwards .1s;}
#checklist input[type="checkbox"]:checked::before, #checklist input[type="checkbox"]:checked::after {background: var(--success);}

/* error == indeterminate */
#checklist input[type="checkbox"]:indeterminate::before {animation: error-icon-before .4s ease forwards;}
#checklist input[type="checkbox"]:indeterminate::after {animation: error-icon-after .4s ease forwards;}
#checklist input[type="checkbox"]:indeterminate + label {color: var(--error);animation: move .3s ease .2s forwards;animation-iteration-count: 2;}
#checklist input[type="checkbox"]:indeterminate + label::before {background: var(--error);animation: none;opacity: 0;}
#checklist input[type="checkbox"]:indeterminate + label::after {animation: error-firework .5s ease forwards .1s;}
#checklist input[type="checkbox"]:indeterminate::before, #checklist input[type="checkbox"]:indeterminate::after {background: var(--error);}
